<template>
    <view class="cu-form-group">
    	<view class="title">{{label}}</view>
    	<picker @change="PickerChange" :value="index" :range="picker" range-key="value">
    		<view class="picker">
    			{{index>-1?picker[index].value:placeholder}}
    		</view>
    	</picker>
    </view>
</template>

<script>
    import api from '../../static/js/api.js'
	import com from '../../static/js/com.js'
    export default {
        name: "myEntity",
        props: {
            value: '',
			model:'',
			label:'',
			placeholder:''
        },
        data() {
            return {
                picker: [],
                index: -1
            }
        },
        methods: {
            PickerChange(e) {
				console.log(this.index)
				if(this.index === -1){this.index = 0}else{this.index = e.detail.value}
				this.$emit('input',this.picker[this.index].id)
            },
        },
        mounted() {
            api.get("/admin/" + this.model + '/choice',{},(res)=>{
				console.log(res)
				this.picker = res.d
				if(com.isbool(this.value)){
					this.picker.map((data,index)=>{
						if(data.id === this.value){this.index = index}
					})
				}
			})
        },
		watch:{
			value(curVal,oldVal){
				if(com.isbool(curVal)){
					this.picker.map((data,index)=>{
						if(data.id === curVal){this.index = index}
					})
				}
			},
			index(curVal,oldVal){
				
				console.log(curVal)
				console.log(oldVal)
				if(com.isbool(curVal)){
					this.picker.map((data,index)=>{
						if(data.id === curVal){this.index = index}
					})
				}
			}
		}
    }
</script>

<style>
    .cu-form-group .title {
    	min-width: calc(4em + 15px);
    }
</style>
